pageIndicator/animatedPageIndicators: Implement vertical animation

It is basically the same of animating horizontally, except on the Y axis, and
based on the height of the indicators.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1518>

diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index c5fa78ee6125b0a36644d1b240347a6c9fea7229..a86f32a3b082275088b99117d216936d5050fe65 100644 (file)
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -161,7 +161,7 @@ var BaseAppView = GObject.registerClass({
 
         // Page Indicators
         if (vertical)
-            this._pageIndicators = new PageIndicators.AnimatedPageIndicators();
+            this._pageIndicators = new PageIndicators.AnimatedPageIndicators(orientation);
         else
             this._pageIndicators = new PageIndicators.PageIndicators(orientation);
 

diff --git a/js/ui/pageIndicators.js b/js/ui/pageIndicators.js
index 8ac44d4b2b8a8622edd08fbe3f3750cd7b9424c0..91a1ef2cfd5d6c6bfcd9df7215050e85bd440d90 100644 (file)
--- a/js/ui/pageIndicators.js
+++ b/js/ui/pageIndicators.js
@@ -40,6 +40,7 @@ var PageIndicators = GObject.registerClass({
         this._currentPosition = 0;
         this._reactive = true;
         this._reactive = true;
+        this._orientation = orientation;
     }
 
     vfunc_get_preferred_height(forWidth) {
@@ -128,8 +129,8 @@ var PageIndicators = GObject.registerClass({
 
 var AnimatedPageIndicators = GObject.registerClass(
 class AnimatedPageIndicators extends PageIndicators {
-    _init() {
-        super._init();
+    _init(orientation = Clutter.Orientation.VERTICAL) {
+        super._init(orientation);
         this.connect('destroy', this._onDestroy.bind(this));
     }
 
@@ -163,11 +164,12 @@ class AnimatedPageIndicators extends PageIndicators {
         for (let i = 0; i < this._nPages; i++)
             children[i].remove_all_transitions();
 
+        const vertical = this._orientation === Clutter.Orientation.VERTICAL;
         let offset;
         if (this.get_text_direction() == Clutter.TextDirection.RTL)
-            offset = -children[0].width;
+            offset = vertical ? -children[0].width : -children[0].height;
         else
-            offset = children[0].width;
+            offset = vertical ? children[0].width : children[0].height;
 
         let isAnimationIn = animationDirection == AnimationDirection.IN;
         let delay = isAnimationIn
@@ -182,13 +184,21 @@ class AnimatedPageIndicators extends PageIndicators {
             delay -= (totalAnimationTime - maxTime) / this._nPages;
 
         for (let i = 0; i < this._nPages; i++) {
-            children[i].translation_x = isAnimationIn ? offset : 0;
-            children[i].ease({
-                translation_x: isAnimationIn ? 0 : offset,
+            const params = {
                 duration: baseTime + delay * i,
                 mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
                 delay: isAnimationIn ? ANIMATION_DELAY : 0,
-            });
+            };
+
+            if (vertical) {
+                children[i].translation_x = isAnimationIn ? offset : 0;
+                params.translation_x = isAnimationIn ? 0 : offset;
+            } else {
+                children[i].translation_y = isAnimationIn ? offset : 0;
+                params.translation_y = isAnimationIn ? 0 : offset;
+            }
+
+            children[i].ease(params);
         }
     }
 });